<template>
    <div>
        <el-dialog
            @close="closeAddCustomerContacts"
            :before-close="handleClose"
            title="Add Customer Contacts"
            v-dialog-drag
            :visible.sync="visible">
            <el-form ref="addContactsForm" :model="addContactsForm" :rules="addContactsRules" size="medium"
                     label-width="120px"
                     label-position="left">
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="CustomerId:" prop="customerId">
                            <el-input v-model="customer.customerId" :disabled='true'
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="130px" label="CustomerName:" prop="customerName">
                            <el-input v-model="customer.customerName" :disabled='true'
                            ></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Name:" prop="contactsName">
                            <el-input v-model="addContactsForm.contactsName" placeholder="Please input name" clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Department:" prop="contactsDept">
                            <el-select v-model="addContactsForm.contactsDept" placeholder="Please choose dept"
                                       filterable
                                       clearable
                                       :style="{width: '100%'}"
                            >
                                <el-option v-for="(item, index) in options.contactsDeptOptions" :key="index"
                                           :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Position:" prop="contactsPosition">
                            <el-select v-model="addContactsForm.contactsPosition" placeholder="Please choose position"
                                       filterable
                                       clearable
                                       :style="{width: '100%'}">
                                <el-option v-for="(item, index) in options.contactsPositionOptions" :key="index"
                                           :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Tel:" prop="contactsTelephone">
                            <el-input v-model="addContactsForm.contactsTelephone" placeholder="Please input tel" clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Mobilephone:" prop="contactsMobilephone">
                            <el-input v-model="addContactsForm.contactsMobilephone" placeholder="Please input mobilephone" clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Fax:" prop="contactsFax">
                            <el-input v-model="addContactsForm.contactsFax" placeholder="Please input fax" clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Email:" prop="contactsEmail">
                            <el-input v-model="addContactsForm.contactsEmail" placeholder="Please input Email" clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="QQ:" prop="contactsQq">
                            <el-input v-model="addContactsForm.contactsQq" placeholder="Please input QQ" clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="Wechat:" prop="contactsWechat">
                            <el-input v-model="addContactsForm.contactsWechat" placeholder="Please input wechat" clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="resetAddCustomerContacts">Cancel</el-button>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium"
                           @click="handleAddCustomerContacts"> Add
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "AddCustomerContactsDialog",
    props: ['visible', 'onClose', 'callback', 'options', 'customer'],
    data() {
        return {
            addContactsForm: {
                contactsName: "",
                contactsDept: "",
                contactsPosition: "",
                contactsTelephone: "",
                contactsMobilephone: "",
                contactsEmail: "",
                contactsFax: "",
                contactsQq: "",
                contactsWechat: "",
            },
            addContactsRules: {
                contactsName: [{
                    required: true,
                    message: 'Please input name',
                    trigger: 'blur'
                }],
                contactsDept: [{
                    required: true,
                    message: 'Please input dept',
                    trigger: 'change'
                }],
                contactsPosition: [{
                    required: true,
                    message: 'Please input position',
                    trigger: 'change'
                }],
                contactsTelephone: [{
                    required: true,
                    message: 'Please input tel',
                    trigger: 'blur'
                }],
                contactsMobilephone: [{
                    required: true,
                    message: 'Please input mobilephone',
                    trigger: 'blur'
                }],
                contactsEmail: [{
                    required: true,
                    message: 'Please input email',
                    trigger: 'blur'
                }],
                contactsFax: [{
                    required: true,
                    message: 'Please input fax',
                    trigger: 'blur'
                }],
                contactsQq: [{
                    required: true,
                    message: 'Please input qq',
                    trigger: 'blur'
                }],
                contactsWechat: [{
                    required: true,
                    message: 'Please input wechat',
                    trigger: 'blur'
                }],
            },
        }
    },

    methods: {
        closeAddCustomerContacts() {
            this.onClose()
        },
        handleAddCustomerContacts() {
            this.$refs['addContactsForm'].validate(valid => {
                if (!valid) return
                console.log('before close', this.addContactsForm);
                //深拷贝
                const dd = JSON.parse(JSON.stringify(this.addContactsForm))
                this.callback(dd);
                this.resetAddCustomerContacts()
                this.$message.success("Add success!")
            })
        },
        resetAddCustomerContacts() {
            this.$refs['addContactsForm'].resetFields();
            this.closeAddCustomerContacts()

        },
        handleClose() {
            this.$refs['addContactsForm'].resetFields();
            this.closeAddCustomerContacts()
        }
    }

}
</script>

<style scoped>

</style>